<template>

    <!-- 遮罩层 -->
    <com-modal v-model:visible="visible" @modal-click="modalHiden">
    </com-modal>

    <!-- 弹窗层 -->
    <div class="pop-main" v-if="visible">
        <div class="pop-head">
            <div class="pop-head-title">{{ title }}</div>
            <div class="pop-head-hiden"
                 @click="modalHiden">
                <el-icon size="14">
                    <i-ep-CloseBold/>
                </el-icon>
            </div>
        </div>
        <div class="pop-content">
            <slot></slot>
        </div>
    </div>

</template>

<script setup lang="ts">
    import ComModal from '@/components/com-modal/com-modal.vue'

    defineOptions({
        name: 'com-pop'
    })

    //region # 属性

    // 标题
    let title = defineModel('title', { type: String, required: true })

    // 显示状态
    let visible = defineModel('visible', { type: Boolean, required: true })

    //endregion

    //region # 方法

    // Action

    /**
     * 模态隐藏
     * */
    function modalHiden() {
        visible.value = false
    }

    // Private

    //endregion

</script>

<style scoped>
    @import "com-pop.less";
</style>